<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 
            v-指令名:参数.修饰符=取值
                参数=用于限制指令的功能
                修饰符=用于控制指令的执行时机
                取值=用于提供指令的定义值
         -->
        <p v-hello>全局指令1</p>
        <p v-hello:border=" '1px solid blue' ">全局指令2</p>
        <p v-hello:border.not=" '1px solid blue' ">{{ msg }}</p>
        <input type="text" v-model="msg">
        <p v-hello=" color ">全局指令3</p>
        <!-- 参数是不具有驼峰性质 -->
        <!-- <p v-hello:background-color=" '#cccccc' ">全局指令4</p> -->
        <!-- <p v-hello:backgroundColor=" '#cccccc' ">全局指令5</p> -->
        <!-- <p v-hello:[arg].a.b=" num+1 ">完整指令</p>
        <input type="text" v-model="arg">
        <input type="text" v-model.number="num"> -->
        <hr>
        <p v-if="flag" v-my-dir>指令声明周期：{{ msg }}</p>
        <input type="button" value="修改flag" @click="flag=!flag">
        <hr>
        <p v-dir-a>局部指令</p>
        <p v-dir-b>局部指令{{ msg }}</p>
    </div>
</body>
<script>
    // 全局定义
    // Vue.directive(id,Function|Object)
    // 在指令构建时，指令处理方法会功能句情况提供 四个参数
        // el
        // binding
        // newvnode
        // oldvnode
    Vue.directive("hello",function(el,binding){
        // console.log("hello 指令",el);
        // console.log("bingding 参数", binding);
        let attr = " color ";
        Vue.nextTick(function(){
            if(binding.modifiers.not&&el.textContent==""){
                return;
            }
            if(binding.arg){
                attr = binding.arg;
            }
            if(binding.value){
                el.style[attr] = binding.value;
            }
        })
    })

    Vue.directive('myDir',{
        bind(el,binding){
            console.log("指令第一次完成 虚拟DOM和该指令绑定关联时执行——只会执行一次")
            console.log(el,binding);
        },
        inserted(el,binding){
            console.log("被绑定的虚拟DOM 写入页面时执行 只会执行一次")
            console.log(el,binding)
        },
        update(el,binding,newVnode,oldVnode) {
            console.log("被绑定的DOM节点发生变化是 进行执行——重复执行")
            console.log(el,binding,newVnode,oldVnode);
        },
        componentUpdated(el,binding){
            console.log("被绑定的DOM节点和其他子节点全部完成更新 进行执行——重复执行")
            console.log(el,binding)
        },
        unbind(){
            console.log("指定元素被销毁时，执行的方法")
        }
    })
    Vue.directive("dirA",function(){
        console.log("全局dirA")
    })
    new Vue({
        el:"#app",
        data:{
            color:"green",
            msg:"",
            num:2,
            flag:true,
            arg:"arg1"
        },
        directives:{
            dirA(el){
                console.log("局部的dirA",el);
            },
            "dir-b":{
                bind(){
                    console.log("dir-b:bind")
                },
                update() {
                    console.log("dir-b:update")
                },
            }
        }  
    })
</script>
</html>